<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-23 13:36:00
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-12-21 08:57:05
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="add modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1244px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form *ngIf="active" #bopForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{title}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 733px!important; width: 100%;">
                    <div class="p-formgroup-inline flex">
                        <div class="flex">
                            <label style="margin-top: 5px;">合格证号：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="qualifiedNumber"
                                type="text" [(ngModel)]="form.qualifiedNumber" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;">放行单号：</label>
                            <input disabled style=" width:150px;height: 35px;" name="releaseOrder" type="text"
                                [(ngModel)]="form.releaseOrder" />
                        </div>
                    </div>
                    <hr style="border: 0.5px solid #DDDDDD;">
                    <div class="p-formgroup-inline mt flex">
                        <div class="flex">
                            <label style="margin-top: 5px;">产品图号：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;"
                                name="ProductDrawingNo" type="text" [(ngModel)]="form.productDrawingNo" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;">产品名称：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="productName"
                                type="text" [(ngModel)]="form.productName" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 65px;">批次：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="Batch"
                                type="text" [(ngModel)]="form.batch" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;">合格证任务号：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;"
                                name="qualifiedTaskNumber" type="text" [(ngModel)]="form.qualifiedTaskNumber" />
                        </div>
                        <div class="flex">
                            <label class="lwid" style="margin-top: 5px;">可用数量：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="storeQuality"
                                type="number" [(ngModel)]="form.storeQuality" />
                        </div>
                    </div>
                    <div class="p-formgroup-inline mt flex" style="height: 30%;">
                        <div class="flex">
                            <label class="lwid">可用产品编号(件号)：</label>
                            <div class="row align-items-center">
                                <div class="primeng-datatable-container">
                                    <p-table [value]="productCode" [lazy]="true" [scrollable]="true">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width: 50px">序号</th>
                                                <th style="width: 100px">产品编号</th>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                            <tr>
                                                <td style="width: 50px">{{rowIndex+1}}</td>
                                                <td pEditableColumn style="width: 100px" *ngIf="title != '合格证信息查看'">
                                                    <p-cellEditor>
                                                        <ng-template pTemplate="input">
                                                            <input pInputText name="rowIndex" type="text"
                                                                [(ngModel)]="record.code">
                                                        </ng-template>
                                                        <ng-template pTemplate="output">
                                                            {{record.code}}
                                                        </ng-template>
                                                    </p-cellEditor>
                                                </td>
                                                <td *ngIf="title == '合格证信息查看'" style="width: 100px">{{record.code}}</td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                </div>
                            </div>
                        </div>
                        <div class="flex" style="margin-left: 16px;">
                            <label class="lwid">特殊记载：</label>
                            <textarea rows="5" cols="30" disabled style=" width:626px;height: 185px;margin-right: 10px;" name="specialRecords"
                                type="text" [(ngModel)]="form.specialRecords" ></textarea>
                        </div>
                    </div>
                    <div class="p-formgroup-inline mt flex">
                        <div class="flex">
                            <label class="lwid" style="margin-top: 5px;">所有数量：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="amount"
                                type="text" [(ngModel)]="form.amount" />
                        </div>
                        <div class="flex">
                            <label style="width: 65px;">所有产品编号:</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="jianNum"
                                type="text" [(ngModel)]="form.jianNum" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;">接收车间：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="inceptWorkshop"
                                type="text" [(ngModel)]="form.inceptWorkshop" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 91px;">质控卡号：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="qcCardNo"
                                type="text" [(ngModel)]="form.qcCardNo" />
                        </div>
                    </div>
                    <div class="p-formgroup-inline mt flex" style=" width: 100%;">
                        <div style="width: 57%;height: 100%;">
                            <div class="p-formgroup-inline flex">
                                <div class="flex">
                                    <label class="lwid">非金属材料牌号：</label>
                                    <input disabled style=" width:150px;height: 35px;margin-right: 10px;"
                                        name="nonmetallicMaterialsBrand" type="text"
                                        [(ngModel)]="form.nonmetallicMaterialsBrand" />
                                </div>
                                <div class="flex">
                                    <label style="margin-top: 5px;width: 65px;">批次号：</label>
                                    <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="BatchNo"
                                        type="text" [(ngModel)]="form.batchNo" />
                                </div>
                                <div class="flex">
                                    <label style="margin-top: 5px;">压制日期：</label>
                                    <input disabled style=" width:150px;height: 35px;margin-right: 10px;"
                                        name="suppressionDate" type="text" [(ngModel)]="form.suppressionDate" />
                                </div>
                            </div>
                            <div class="p-formgroup-inline mt flex">
                                <div class="flex">
                                    <label class="lwid">金属材料牌号状态：</label>
                                    <input disabled style=" width:150px;height: 35px;margin-right: 10px;"
                                        name="materialBrandStatus" type="text" [(ngModel)]="form.materialBrandStatus" />
                                </div>
                                <div class="flex">
                                    <label style="width: 65px;">炉(批)号：</label>
                                    <input disabled style=" width:150px;height: 35px;margin-right: 10px;"
                                        name="heatNumber" type="text" [(ngModel)]="form.heatNumber" />
                                </div>
                                <div class="flex">
                                    <label style="width: 65px;">化(试)验号:</label>
                                    <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="mthd"
                                        type="text" [(ngModel)]="form.mthd" />
                                </div>
                            </div>
                        </div>
                        <div class="flex" style="width: 43%;height: 100%;">
                            <div class="flex">
                                <label class="lwid" style="margin-top: 5px;margin-right: 19px;">处理技术问题文件编号:</label>
                                <input disabled style=" width:383px;height: 90px;margin-right: 10px;" name="documentNo"
                                    type="text" [(ngModel)]="form.documentNo" />
                            </div>
                        </div>
                    </div>
                    <div class="p-formgroup-inline mt flex">
                        <div class="flex">
                            <label style="margin-top: 5px;">制造车间：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;"
                                name="manufacturingWorkshop" type="text" [(ngModel)]="form.manufacturingWorkshop" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;">生产工人：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;"
                                name="productionWorkers" type="text" [(ngModel)]="form.productionWorkers" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 65px;">工(组)长：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="foreman"
                                type="text" [(ngModel)]="form.foreman" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 91px;">检验员：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="inspector"
                                type="text" [(ngModel)]="form.inspector" />
                        </div>
                        <div class="flex">
                            <label class="lwid" style="margin-top: 5px;">日期：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="date"
                                type="text" [(ngModel)]="form.date" />
                        </div>
                    </div>
                    <hr style="border: 0.5px solid #DDDDDD;" [hidden]="title == '产品隔离'">
                    <div class="p-formgroup-inline flex mt">
                        <div class="flex">
                            <label class="lwid">*型 号 (产品代号)：</label>
                            <p-multiSelect [disabled]="title == '产品隔离' || title == '合格证信息查看'"
                                [panelStyle]="{width:'150px'}" [options]="modelOptions" id="model" filter="true"
                                name="model" #modelSelect="ngModel" required [(ngModel)]="model" defaultLabel="请选择型号"
                                 [itemSize]="34" (onChange)="getSendTime($event)" dataKey="value"
                                optionLabel="label">
                            </p-multiSelect>
                            <validation-messages [formCtrl]="modelSelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label class="lwid" style="margin-top: 5px;margin-left: 10px;">*发次：</label>
                            <p-multiSelect [disabled]="title == '产品隔离' || title == '合格证信息查看'"
                                [panelStyle]="{width:'150px'}" [options]="sendTimeOptions" id="sendTime" filter="true"
                                name="sendTime" #sendTimeSelect="ngModel" required [(ngModel)]="sendTime" dataKey="value"
                                optionLabel="label" defaultLabel="请选择型号"  [itemSize]="34">
                            </p-multiSelect>
                            <validation-messages [formCtrl]="sendTimeSelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label class="lwid" style="margin-left: 10px;">*物料类别:</label>
                            <p-dropdown [disabled]="title == '产品隔离' || title == '合格证信息查看'" required
                                #materialsNodeIdSelect="ngModel" filter="true" name="materialsNodeId"
                                [options]="materialsNodeOptions" placeholder="请选择物料类别"
                                [(ngModel)]="form.materialsNodeId" emptyFilterMessage="暂无数据"
                                (onChange)="onChange($event)">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="materialsNodeIdSelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 91px;margin-left: 10px;">*物料细类：</label>
                            <p-dropdown [disabled]="title == '产品隔离' || title == '合格证信息查看'" required
                                #materialCategoryIdSelect="ngModel" filter="true" name="materialCategoryId"
                                [options]="materialCategoryOptions" placeholder="请选择物料细类"
                                [(ngModel)]="form.materialCategoryId" emptyFilterMessage="暂无数据">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="materialCategoryIdSelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label class="lwid" style="margin-top: 5px;margin-left: 10px;">规格：</label>
                            <p-dropdown [disabled]="title == '产品隔离' || title == '合格证信息查看'" filter="true" name="module"
                                [options]="moduleOptions" placeholder="请选择规格" [(ngModel)]="form.module"
                                emptyFilterMessage="暂无数据">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                        </div>
                    </div>
                    <div class="p-formgroup-inline flex mt">
                        <div class="flex time">
                            <label style="margin-top: 5px;">有效期止：</label>
                            <p-calendar [disabled]="title == '产品隔离' || title == '合格证信息查看'" name="expirationDate"
                                [(ngModel)]="expirationDate" [showIcon]="true">
                            </p-calendar>
                        </div>
                        <div class="flex">
                            <label class="lwid" style="margin-top: 5px;margin-left: 10px;">*单位：</label>
                            <p-dropdown [disabled]="title == '产品隔离' || title == '合格证信息查看'" required
                                #unitSelect="ngModel" filter="true" name="unit" [options]="unitOptions"
                                placeholder="请选择单位" [(ngModel)]="form.unitId" emptyFilterMessage="暂无数据">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="unitSelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label class="lwid" style="margin-top: 5px;margin-left: 10px;">储位：</label>
                            <p-dropdown [disabled]="title == '产品隔离' || title == '合格证信息查看'" filter="true"
                                name="binLocation" [options]="binLocationOptions" placeholder="请选择储位"
                                [(ngModel)]="form.binLocationId" emptyFilterMessage="暂无数据">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;margin-left: 10px;width: 91px;">转批次：</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证信息查看'"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="turnBatch" type="text"
                                [(ngModel)]="form.turnBatch" />
                        </div>
                    </div>
                    <hr style="border: 0.5px solid #DDDDDD;" [hidden]="title == '合格证信息修改'">
                    <div class="p-formgroup-inline flex" *ngIf="title != '合格证信息修改'">
                        <div class="flex">
                            <label class="lwid" style="margin-top: 5px;">*隔离单号:</label>
                            <input [disabled]="title != '产品隔离'" required #isolationCodeInput="ngModel"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="IsolationCode" type="text"
                                [(ngModel)]="apartForm.isolationCode" />
                            <validation-messages [formCtrl]="isolationCodeInput"></validation-messages>
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;margin-right: 10px;">*解除配套/预配套关系:</label>
                            <p-toggleButton [disabled]="title != '产品隔离'" name="isOrNot" [(ngModel)]="isOrNot"
                                [style]="{'width':'60px'}" onLabel="是" offLabel="否"></p-toggleButton>
                        </div>
                    </div>
                    <div class="p-formgroup-inline flex mt" *ngIf="title != '合格证信息修改'">
                        <div class="flex">
                            <label style="margin-top: 5px;">*隔离原因:</label>
                            <input [disabled]="title != '产品隔离'" required #isolationReasonInput="ngModel"
                                style=" width:856px;height: 50px;margin-right: 10px;" name="isolationReason" type="text"
                                [(ngModel)]="apartForm.isolationReason" />
                            <validation-messages [formCtrl]="isolationReasonInput"></validation-messages>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="justify-content: center;" *ngIf="title != '合格证信息查看'">
                    <button pButton [disabled]="!bopForm.form.valid" type="button" label="取消" (click)="close()"
                        style="margin-left: 0.5rem"></button>
                    <button [hidden]="title == '产品隔离'" pButton [disabled]="!bopForm.form.valid" type="button" label="保存"
                        (click)="save()" style="margin-left: 0.5rem"></button>
                    <button [hidden]="title != '产品隔离'" pButton [disabled]="!bopForm.form.valid" type="button" label="隔离"
                        (click)="ex()" style="margin-left: 0.5rem"></button>
                </div>
            </form>
        </div>
    </div>
</div>